<template>
  <div id="shoppe">
    <p id="phone">手机</p>
    <!-- 手机 -->
    <div class="phone">
      <div id="left"></div>
      <div id="right">
        <ul>
          <li v-for="(item,index) in phoneData" :key="index" @click="getDetails(item.product_id)">
            <img :src="'http://39.100.7.70:81/'+item.product_picture" alt />
            <p>{{item.product_name}}</p>
            <p>{{item.product_title}}</p>
            <p>
              <span>{{item.product_selling_price}}元</span>
              <s>{{item.product_price}}元</s>
            </p>
          </li>
          <li>
            <p @click="$router.push('/shopAll')">浏览更多>></p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 家电 -->
    <div id="phones">
      <p>家电</p>
      <ul>
        <li
          v-for="(item,idx) in btn"
          :key="idx"
          @mousemove="getIndex(idx)"
          :class="{active:idx==showIndex}"
        >{{item}}</li>
      </ul>
    </div>
    <div id="homeAppliances">
      <div id="left">
        <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png" alt />
        <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png" alt />
      </div>
      <div id="right">
        <ul v-show="showIndex == 0">
          <!-- 空调数据 -->
          <li
            v-for="(item,index) in HomeData"
            :key="index"
            @click="getDetails(item.product_id)"
          >
            <img :src="'http://39.100.7.70:81/'+item.product_picture" alt />
            <p>{{item.product_name}}</p>
            <p>{{item.product_title}}</p>
            <p>
              <span>{{item.product_selling_price}}元</span>
              <s>{{item.product_price}}元</s>
            </p>
          </li>
          <li>
            <p class="pp" @click="$router.push('/shopAll')">浏览更多>></p>
          </li>
        </ul>
        <ul v-show="showIndex == 1">
          <!-- 空调数据 -->
          <li v-for="(item,index) in TVdata" :key="index" @click="getDetails(item.product_id)">
            <img :src="'http://39.100.7.70:81/'+item.product_picture" alt />
            <p>{{item.product_name}}</p>
            <p>{{item.product_title}}</p>
            <p>
              <span>{{item.product_selling_price}}元</span>
              <s>{{item.product_price}}元</s>
            </p>
          </li>
          <li>
            <p class="pp" @click="$router.push('/shopAll/goods?categoryID='+2)">浏览更多>></p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 配件 -->
    <div id="phones">
      <p>配件</p>
      <ul>
        <li
          v-for="(item,idx) in btnn"
          :key="idx"
          @mousemove="getIndexPei(idx)"
          :class="{active:idx==peiShowIndex}"
        >{{item}}</li>
      </ul>
    </div>
    <div id="homeAppliances">
      <div id="left">
        <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png" alt />
        <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png" alt />
      </div>
      <div id="right">
        <ul v-show="peiShowIndex == 0">
          <!-- 配件热门数据 -->
          <li
            v-for="(item,index) in  PhoneFirmCharger"
            :key="index"
            @click="getDetails(item.product_id)"
          >
            <img :src="'http://39.100.7.70:81/'+item.product_picture" alt />
            <p>{{item.product_name}}</p>
            <p>{{item.product_title}}</p>
            <p>
              <span>{{item.product_selling_price}}元</span>
              <s>{{item.product_price}}元</s>
            </p>
          </li>
          <li>
            <p class="pp" @click="$router.push('/shopAll')">浏览更多>></p>
          </li>
        </ul>
        <ul v-show="peiShowIndex == 1">
          <!-- 配件保护膜数据 -->
          <li
            v-for="(item,index) in MobilePhoneData"
            :key="index"
            @click="getDetails(item.product_id)"
          >
            <img :src="'http://39.100.7.70:81/'+item.product_picture" alt />
            <p>{{item.product_name}}</p>
            <p>{{item.product_title}}</p>
            <p>
              <span>{{item.product_selling_price}}元</span>
              <s>{{item.product_price}}元</s>
            </p>
          </li>
          <li>
            <p class="pp" @click="$router.push('/shopAll/goods?categoryID='+6)">浏览更多>></p>
          </li>
        </ul>
        <ul v-show="peiShowIndex == 2">
          <!-- 配件充电器数据 -->
          <li v-for="(item,index) in ChargerData" :key="index" @click="getDetails(item.product_id)">
            <img :src="'http://39.100.7.70:81/'+item.product_picture" alt />
            <p>{{item.product_name}}</p>
            <p>{{item.product_title}}</p>
            <p>
              <span>{{item.product_selling_price}}元</span>
              <s>{{item.product_price}}元</s>
            </p>
          </li>
          <li>
            <p class="pp" @click="$router.push('/shopAll/goods?categoryID='+7)">浏览更多>></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "@/api/Home.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      showIndex: 0, //家电设置默认显示项
      peiShowIndex: 0, //配件默认显示项
      btn: ["热门", "电视影音"], //家电块选项卡
      btnn: ["热门", "保护套", "充电器"],
      phoneData: [], //手机数据
      HomeData: [], //家电空调数据
      WashingData: [], //洗衣机数据
      TVdata: [], //电视机数据
      HomeAppliancesData: [], //合成的家电数据
      MobilePhoneData: [], //配件保护套数据
      ProtectiveFilmData: [], //配件保护膜数据
      ChargerData: [], //配件充电器数据
      PhoneFirmCharger: [] //自己配置配置热门数据
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //点击切换家电板块的选项
    getIndex(dir) {
      this.showIndex = dir;
      console.log(this.showIndex);
    },
    //点击切换配件板块的选项
    getIndexPei(dir) {
      this.peiShowIndex = dir;
      console.log(this.peiShowIndex);
    },
    //手机数据
    async getPhone() {
      let { data: res } = await Api.getPromoProduct();
      //   console.log(res);
      this.phoneData = res.Product;
    },
    //家电数据
    async getJiaDian() {
      let { data: res } = await Api.getJiaDian();
      //   console.log(res);
      this.HomeData = res.Product;
      console.log(this.HomeData);
      
    },
    //洗衣机数据
    async getPromoProductWashing() {
      let { data: res } = await Api.getPromoProductWashing();
      //   console.log(res);
      this.WashingData = res.Product;
    },
    //电视机数据
    async getPromoProductTV() {
      let { data: res } = await Api.getPromoProductTV();
      //   console.log(res);
      this.TVdata = res.Product;
    },
    //配件保护套数据
    async getMobilePhone() {
      let { data: res } = await Api.getMobilePhone();
      // console.log(res);
      this.MobilePhoneData = res.Product;
      this.MobilePhoneData.forEach(item => {
        return this.PhoneFirmCharger.push(item);
      });
    },
    //配件保护膜数据
    async getProtectiveFilm() {
      let { data: res } = await Api.getProtectiveFilm();
      // console.log(res);
      this.ProtectiveFilmData = res.Product;
    },
    //配件充电器数据
    async getCharger() {
      let { data: res } = await Api.getCharger();
      // console.log(res);
      this.ChargerData = res.Product;
    },
    // 配件热门数据
    async getPhoneFirmCharger() {
      let { data: res } = await Api.getPhoneFirmCharger();
      console.log(res);
      this.PhoneFirmCharger = res.Product;
    },
    // 点击商品进入商品详情页
    getDetails(id) {
      console.log(id);
      // this.$router.push("/details?id=" + item.product_id);
      this.$router.push("/details?id=" + id);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getPhone(); //手机接口
    this.getJiaDian(); //家电空调接口
    this.getPromoProductWashing(); //家电洗衣机接口
    this.getPromoProductTV(); //家电电视机数据
    this.getMobilePhone(); //配件保护套数据
    this.getProtectiveFilm(); //配件保护膜数据
    this.getCharger(); //配件充电器数据
    this.getPhoneFirmCharger(); //配件热门数据
    // this.getDetails()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
#shoppe {
  margin-top: 22px;
  width: 100%;
  //   height: 500px;
  background: #f5f5f5;
  padding: 20px 200px;
  #phone {
    font-size: 22px;
  }
  .phone {
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
    height: 602px;
    // border: 1px solid #000;
    display: flex;
    justify-content: space-between;
    #left {
      margin-right: 15px;
      width: 226px;
      height: 100%;
      background: url("http://106.15.179.105:3000/public/imgs/phone/phone.png")
        no-repeat center;
    }
    #right {
      flex: 1;
      //   border: 1px solid #000;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        li:hover {
          transition: all 0.2s linear;
          box-shadow: #efefef 40px 40px 40px;
          margin-top: -4px;
        }
        li {
          background: white;
          width: 200px;
          height: 280px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 26px;
          img {
            width: 100%;
            height: 160px;
          }
          p {
            &:nth-of-type(1) {
              font-size: 13px;
            }
            &:nth-of-type(2) {
              font-size: 12px;
              color: #b0b0b0;
            }
            &:nth-of-type(3) {
              span {
                &:nth-of-type(1) {
                  color: red;
                  font-size: 16px;
                  margin-right: 10px;
                }
              }
              s {
                color: #b0b0b0;
                font-size: 16px;
              }
            }
          }
          &:nth-of-type(8) {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            p {
              font-size: 18px;
              cursor: pointer;
              &:hover {
                color: red;
              }
            }
          }
        }
      }
    }
  }
}
#phones {
  width: 100%;
  display: flex;
  justify-content: space-between;
  p {
    font-size: 22px;
  }
  ul {
    margin-top: 10px;
    display: flex;
    li {
      &:hover {
        color: red;
        border-bottom: 2px solid red;
      }
      margin-left: 20px;
      font-size: 14px;
    }
  }
}
#homeAppliances {
  margin-bottom: 20px;
  margin-top: 20px;
  width: 100%;
  height: 602px;
  // border: 1px solid #000;
  display: flex;
  justify-content: space-between;
  #left {
    margin-right: 15px;
    width: 226px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    img {
      width: 100%;
      height: 280px;
    }
  }
  #right {
    flex: 1;
    //   border: 1px solid #000;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      li:hover {
        transition: all 0.2s linear;
        box-shadow: #efefef 40px 40px 40px;
        margin-top: -4px;
      }
      li {
        background: white;
        width: 200px;
        height: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 26px;
        img {
          width: 100%;
          height: 160px;
        }
        p {
          &:nth-of-type(1) {
            font-size: 13px;
            width: 200px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &:nth-of-type(2) {
            font-size: 12px;
            color: #b0b0b0;
          }
          &:nth-of-type(3) {
            span {
              &:nth-of-type(1) {
                color: red;
                font-size: 16px;
                margin-right: 10px;
              }
            }
            s {
              color: #b0b0b0;
              font-size: 16px;
            }
          }
        }
        &:nth-of-type(8) {
          display: flex;
          justify-content: center;
          align-items: center;
          // font-size: 20px;
          p {
            margin-right: 28px;
            cursor: pointer;
            font-size: 18px;
            &:hover {
              color: red;
            }
          }
        }
      }
    }
  }
}
.active {
  color: red;
  border-bottom: 2px solid red;
}
.pp {
  cursor: pointer;
  padding-left: 50px;
}
</style>